<template>
  <div class="register">
    <h1>请填写以下信息</h1>
    <InputBox title="社团名称" v-model="inf.associationName"></InputBox>
    <InputBox title="手机号" v-model="inf.phone" :checkout="reg_phone"></InputBox>
    <InputBox title="密码" v-model="inf.password" type="password"></InputBox>
    <InputBox title="再次确认密码" v-model="reconfirm" :checkout="inf.password" type="password"></InputBox>
    <InputBox title="邮箱" x="420px" :btn="true" v-model="inf.email" :checkout="reg_email"></InputBox>
    <InputBox title="邮箱验证码" v-model="inf.code"></InputBox>
    <button class="register-btn" v-debounce="{ fn: register }">注册</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import InputBox from "../components/InputBox.vue";
import { userRequest } from "../api/UserRequest"

interface information {
  associationName: string;
  phone: string;
  password: string;
  email: string;
  code: string;
}
let inf: information = reactive({
  associationName: "",
  phone: "",
  password: "",
  email: "",
  code: "",
});

// 检验输入规范的常量
let reconfirm = ref("")  //用于确认密码
const reg_phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
const reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

// 注册的函数
function register() {
  userRequest.Register(inf);
}

</script>

<style lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色,,,,,,,
);

.register {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  h1 {
    text-align: center;
    font-size: 45px;
    color: map-get($map: $colors, $key: t-grey);
    margin-bottom: 52px;
  }
  .input-box {
    margin-bottom: 52px;
  }
  .register-btn {
    border: none;
    width: 294px;
    height: 58px;
    background: #707070;
    color: #f5f5f5;
    border-radius: 100px;
    font-size: 35px;
    margin-left: 530px;
    cursor: pointer;
  }
}
</style>